<template>
  <div>
    
    <div   >
      <div  >
        <header  class="mint-header is-fixed">
        <div   class="backBtn" @click="$router.back(-1)">
          <i  class="icon iconfont icon-back"></i>
        </div>
        <h1 class="mint-header-title">我的推广</h1>
        <div class="mint-header-button is-right">
        </div>
        </header>
      </div>
      <div   class="mainWrap initPaddintTop grayBg">
        <div   class="list" v-for="(item,index) in datalist" :key="index">
          <div   class="item-head item">
            <div   class="item-left">
              <span   class="avatar"><img   alt="" :src="item.headImg" /></span><span  >{{item.nickName}}:{{item.userName}}</span>
            </div>
            <div   class="item-right">
              <span   class="grade">会员</span>
            </div>
          </div>
        </div>
       
      </div>
    </div>  
  </div>
</template>

<script>
import { MySonMemberUrl } from "@/api/axiosFun";
export default {
  name: "Index",
  data() {
    return {
	  datalist: [],
	  page:1,
	pageSize:100,

    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      MySonMemberUrl({
		  page:this.page,
		  pageSize:this.pageSize
	  }).then(res => {
        console.log(res);
        if (res.errCode == 0) {
          this.datalist = res.data;
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mint-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #26a2ff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    height: 40px;
    line-height: 1;
    padding: 0 10px;
    position: relative;
    text-align: center;
    white-space: nowrap;
}
.mint-header.is-fixed {
    top: 0;
    right: 0;
    left: 0;
    position: fixed;
    z-index: 1;
}
.mint-header{
    height: 1.32rem;
    font-size: .44rem;
    background: -webkit-gradient(linear,left top,right top,from(#0af),to(#0085ff));
    background: linear-gradient(90deg,#0af,#0085ff);
    color: #fff;
}
.mint-header-button {
    -webkit-box-flex: .5;
    -ms-flex: .5;
    flex: .5;
}
.mint-header-button.is-left {
    text-align: left;
}
.mint-header .mint-button {
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: inherit;
    display: inline-block;
    padding: 0;
    font-size: inherit;
}
.header-icon{
    color: #fff;
}
.mint-button-icon {
    vertical-align: middle;
    display: inline-block;
}
.mintui {
    font-family: mintui!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: .2px;
    -moz-osx-font-smoothing: grayscale;
}
.mint-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    font-weight: 400;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.mint-header-button {
    -webkit-box-flex: .5;
    -ms-flex: .5;
    flex: .5;
}
.mint-header-button.is-right {
    text-align: right;
}
.mainWrap[data-v-03cf478f] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.mainWrap.initPaddintTop[data-v-03cf478f] {
    padding: 1.32rem 0 0;
}
.mainWrap.grayBg[data-v-03cf478f] {
    background-color: #f5f5f5;
}
.list .item {
    height: .9rem;
    line-height: .9rem;
    padding: .15rem .2rem;
    border-bottom: 1px solid #e9e9e9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: .33rem;
    position: relative;
}
.list .item-head {
    background-color: #f3ebff;
}
.list .item .item-left {
    width: 7rem;
    text-align: right;
    display: block;
}
.list .item span {
    float: left;
}
.list .item span.avatar {
    display: block;
    width: .9rem;
    height: .9rem;
    border-radius: 3px;
    overflow: hidden;
    margin-right: .2rem;
}
.list .item span.avatar img {
    display: block;
    width: 100%;
    background-color: #f5f5f5;
}
.list .item span {
    float: left;
}

.list .item .item-left span:nth-of-type(2) {
    width: 5.8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}
.list .item .item-right {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.list .item span {
    float: left;
}
.list .item .item-right span {
    padding-left: .2rem;
}
.list .item span.grade {
    margin-right: .1rem;
}
.list .item .item-right span:first-of-type {
    color: #9c9c9c;
}
.initPaddintTop{
  margin-top: 46px;
}
</style>
